<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="./js/live2dcubismcore.min.js"></script>
    <script src="./js/live2d.min.js"></script>
    <script src="./js/pixi.min.js"></script>

    <!-- if only Cubism 4 support-->
    <script src="./js/cubism4.min.js"></script>
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>live2dSpeek</title>

    <!-- main js -->
    <script type="text/javascript" src="js/appserver.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="./bitbug_favicon.ico" type="image/xicon">
    <style>
        #body {
            position: fixed; /* Fixed position */
            display: flex; /* Use flexbox for centering */
            top: 50px;
            left: 50px;
            color: #ffffff;
            font-size: 18px;
        }
        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* Set z-index to -1 to place it behind other elements */
            /* 居中显示 */
            margin: auto;
        }
        #control {
            position: absolute;
        }
        #control a{
            color: #ffffff;
            text-decoration: none; /* 去除下划线 */
            font-size: 18px;
        }
        #control h3{
            color: #ffffff;
        }

    </style>
</head>

<body>
    <canvas id=canvas></canvas>

    <!-- 顶部栏：左上版本号，右上设置按钮 -->
    <div class="topbar">
        <div class="topbar-left">LLM Vtuber .Version 3</div>
        <div class="topbar-right">
            <button id="mcp-toggle" class="send-button" style="margin-right:8px">MCP: 检查中...</button>
            <a class="topbar-link" href="settings.html">Setting</a>
        </div>
    </div>

    <!-- 左侧聊天历史栏 -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <span>历史会话</span>
            <button id="clear-history" class="clear-history-btn" title="清除历史记录">🗑️</button>
        </div>
        <div id="history-list" class="history-list"></div>
    </aside>

    <!-- 底部居中输入栏（GPT风格） -->
    <div class="bottom-input">
        <div class="chat-input">
            <textarea id="text" class="chat-textarea" placeholder="输入内容，回车发送..." rows="3"></textarea>
            <button id="mic-btn" class="mic-button" aria-label="语音输入" title="语音输入"></button>
            <button id="start" class="send-button" aria-label="发送" title="发送">发送</button>
        </div>
        <!-- 保留隐藏的原始识别按钮供 JS 触发 -->
        <button id="start-recognize" style="display:none">Start voice recognition</button>
    </div>

    <!-- 思考/生成中提示 -->
    <div id="thinking" class="thinking-chip"><span class="spinner"></span>思考中...</div>



</body>
</html>